<template>
  <div class="addEditArticlePageCont">
    <div class='title'>当前位置：文章管理 / 查看文章</div>
    <div class="addEditArticlePageMian">
      <Form ref="formAddEditArticle" :label-width="110">
        <!-- <FormItem label="文章标题：" prop="articleTitle">
          {{articleTitle}}
        </FormItem> -->
        <FormItem label="文章标题：" prop="articleTags">
          {{articleTitle}}
        </FormItem>
        <FormItem label="文章正文：" prop="articleTags">
          <dt-editor-show v-if="newArticleContent" :content='newArticleContent' />
          <dt-editor-show v-else :content='articleContent' />
        </FormItem>
        <FormItem v-if='sensitiveWords' label="敏感词汇：">
          <div class="wrong">
            {{sensitiveWords}}
          </div>
        </FormItem>
        <FormItem label="图片\视频：" class="FormItemUpload">
          <template>
            <div v-if="preViewImg.length">
              <div class="demo-upload-list" v-for="(item, index) in preViewImg" :key="index">
                <img :src="item">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click="handleView(item)"></Icon>
                </div>
              </div>
            </div>
            <div v-if="preViewVideo" class="demo-upload-list">
              <video controls="controls" :src="preViewVideo">
                您的浏览器不支持 video 标签
              </video>
              <div class="demo-upload-list-cover">
                <Icon type="ios-eye-outline" @click="handleView(preViewVideo)"></Icon>
              </div>
            </div>
          </template>
          <p v-if="!preViewImg.length&&!preViewVideo">无</p>
        </FormItem>
        <div class="footer">
          <Button @click="addEditArticleReset">关闭</Button>
        </div>
      </Form>
    </div>
    <!-- 图片放大 -->
    <preview-image :images="preViewImg" :showIndex="0" ref="preViewImage">
    </preview-image>

    <preview-video :videoUrl="preViewVideo" ref="preViewVideo">
    </preview-video>
  </div>
</template>
<script>
  import dtEditorShow from '@/components/dt/editor/show'
  import articleMgr from '@/biz/article/article'
  import previewVideo from "@/components/previewVideo.vue"
  export default {
    components: {
      dtEditorShow,
      previewVideo,
    },
    props: ['articleDetailsInfo'],
    data() {
      return {
        cityName: '',
        buildingName: '',
        articleTitle: '',
        articleTags: '',
        fileList: [],
        articleContent: '',
        newArticleContent: '',
        sensitiveWords: null,
        preViewImg: [],
        preViewVideo: ''
      }
    },

    methods: {
      // 关闭
      addEditArticleReset() {
        this.$emit('closeCancel')
      },
      handleView(val) {
        if (val) {
          let suffix = val.split('.').pop().toLowerCase()
          if (['mp4', 'avi', 'wmv', 'rmvb'].indexOf(suffix) > -1) {
            console.log('我是视频');
            this.preViewVideo = val
            this.preViewImg = []
            this.$refs.preViewVideo.show()
          } else {
            this.preViewImg = [val]
            this.preViewVideo = ''
            this.$refs.preViewImage.show()
          }
        }


      },
      // 初始化获取数据
      initData() {
        let res = this.articleDetailsInfo
        this.cityName = res.cityName
        this.buildingName = res.buildingAlias
        this.articleTitle = res.articleTitle
        this.articleTags = res.labelType

        this.articleContent = res.articleContent
        this.newArticleContent = res.newArticleContent
        this.sensitiveWords = res.sensitiveWords && res.sensitiveWords.length > 0 ? res
          .sensitiveWords : null

        if (res.articleImage) {
          let suffix = res.articleImage.split('.').pop().toLowerCase()
          if (['mp4', 'avi', 'wmv', 'rmvb'].indexOf(suffix) > -1) {
            console.log('我是视频');
            this.preViewVideo = res.articleImage
            this.preViewImg = []
          } else {
            this.preViewImg = [res.articleImage]
            this.preViewVideo = ''
          }
        }
      },
    },
    created() {
      // 初始化获取数据
      this.initData()
    },
  }
</script>
<style lang="scss" scoped>
  .addEditArticlePageCont {
    .title {
      background-color: #f5f5f5;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      padding: 5px 15px;
    }

    .addEditArticlePageMian {
      margin-top: 16px;
      width: 800px;
    }
  }

  .footer {
    text-align: center;

    button {
      width: 90px;
      margin: 0 10px;
    }
  }

  // 上传
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list video {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .FormItemUpload .ivu-form-item-content {
    display: flex;
  }

  .imageSize {
    display: inline-block;
    margin-left: 16px;
    vertical-align: top;
    padding-top: 16px;
  }

  .wrong {
    color: red;
  }
</style>